<template>
	<view class="login">
	<view class="item">
		<view class="lable">
			银行卡号
		</view>
		<view class="input">
			<u-input
			   placeholder="请输入银行卡号"
			   v-model="form.bank_account"
							border='false'
							type='text'
							placeholderStyle="color: #BBBBBB;font-size: 12px;"
							color="#000"
							
			 ></u-input>
		</view>
	</view>
			<view class="item">
				<view class="lable">
					开户行
				</view>
				<view class="input">
					<u-input
					   placeholder="请输入开户行"
					   v-model="form.bank_name"
									border='false'
									type='text'
									placeholderStyle="color: #BBBBBB;font-size: 12px;"
									color="#000"
									
					 ></u-input>
				</view>
			</view>
			<view class="item">
				<view class="lable">
					联系方式
				</view>
				<view class="input">
					
					<view class="num">{{userInfo.mobile|formatMobile}}</view>
				
				</view>
			</view>
		<view class="item">
			<view class="lable">
				验证码
			</view>
			<view class="input">
				
			<VerifyCode
			:islabel="false" 
			name="请输入验证码" :username="form.username" v-model="form.verify_code" ></VerifyCode>
				
			</view>
		</view>
		<view class="tips">
			<view class="">
				注意：
			</view>
			<view class="">
				1.绑定账户适用于寄售市场收款，请绑定银行“一类卡”卡号。请勿绑定任何银行内定的二类卡、网商银行、虚拟卡号等，可能会导致收款不成功。
				2.由第三方支付提供支付服务，疯传文化不会保存任何您的相关隐私信息。

			</view>
		</view>
				
		
	
		<view class="submit"  >
				<u-button :loading="loading"  :disabled="disabled"  @click="toAdd">提交</u-button>
		</view>
			<tf-verify-img @succeed="chenggong" @close="showVerify = false" v-if="showVerify"></tf-verify-img>
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	import { mapState, mapMutations } from 'vuex'
	import Input from '@/components/Input.vue'
	import VerifyCode from '@/components/verifycode.vue'
	import tfVerifyImg from '@/components/tf-verify-img/tf-verify-img.vue';
	export default {
		mixins:[mixin],
		components:{Input,VerifyCode,tfVerifyImg},
		data() {
			return {
				showVerify:false,
				btntxt:'获取验证码',
				wait:true,
				djsnum:60,
				btm:false,
				showTel:false,
				show:false,
				loading:false,
				session_key:'',
				openid:'',
				userinfo:{},
				form:{
					username :'',//账号
					verify_code:'',//验证码
					bank_name:'',//密码
					bank_account :'',
					type:2
				}
				
			}
		},
		onReady() {
			// this.toweichat()
		},
		onLoad() {
			
		},
		onShow() {
			this.form.username = this.userInfo.mobile
			this.form.bank_name=this.userInfo.bank_name
			this.form.bank_account=this.userInfo.bank_account
		},
		filters:{
			formatMobile(e){
				if(e){
					var reg = /^(\d{3})\d*(\d{4})$/;
					return e.replace(reg,'$1****$2')
				}
			}
		},
		computed: {
			...mapState(['userInfo']),
			disabled(){
				if(this.form.username&&this.form.bank_name&&this.form.bank_account&&this.form.verify_code){
					return false
				}else{
					return true
				}
			}
		},
		methods: {
			
	chenggong(){
			    // uni.showToast({
			    //     title: '验证成功'
			    // });
				this._getCode()
			    this.showVerify = false;
			},
			getCode(){ //点击获取验证码
			if (this.userInfo.mobile != '' && this.wait == true) {
				// this.showVerify = true
				this.chenggong()
			} else {
				uni.$u.toast('请不要连续点击');
			}
				
			 },
			 _getCode(){
			 	this.$http({
			 		url: this.$api.shayuSms,
			 		method: 'POST',
			 		hideLoading: true,
			 		data: {
			 			username: this.userInfo.mobile
			 		}
			 	}).then((res) => { //请求接口
			 		if (res.code == 200) {
			 			this.timer(); //成功后倒计时
			 		}
			 	})
			 },
			 //发送手机验证码倒计时
			 timer() {
			 if (this.djsnum > 0) {
			  this.wait=false;
			  this.djsnum--;
			  this.btntxt=this.djsnum+"秒";
			  setTimeout(this.timer, 1000);
			 } else{
			  this.djsnum=60;
			  this.btntxt="发送验证码";
			  this.wait=true;
			 }
			 },

			//添加银行卡信息
			async toAdd(){
				if(!this.form.bank_name){
					this.$u.toast('请输入开户行')
					return
				}
				if(!this.form.bank_account){
					this.$u.toast('请输入银行卡号')
					return
				}
				if(!this.form.verify_code){
					this.$u.toast('请输入验证码')
					return
				}
				this.codeShow = false
				this.loading = true
				let data = await this.$http({
					url:this.$api.payMent,
					method: 'POST',
					hideLoading: true,
					data:this.form
				})				
				if(data.code==201){				
					uni.$u.toast(data.msg);	
					setTimeout(()=> {
						this.loading = false
						uni.navigateBack()
						// uni.redirectTo({
						// 	url:'/pages/wallet/bankList'
						// })
					}, 1000);			
				}else{
					this.loading = false
					uni.showToast({
					    title: data.msg,
						icon:'none',
					    duration: 2000
					})
				}
		}
		}
	}
</script>

<style lang="scss" scoped>
	
	.login{
		// min-height: 100vh;
		padding: 0rpx 30rpx 0rpx 30rpx;
		box-sizing: border-box;
		background-color: #FFF;
		display: flex;
		// align-items: center;
		flex-direction: column;
		// justify-content: space-between;
		::v-deep .code{
			 .u-button{
				background-color: transparent!important;
				font-size: 30rpx;
				font-weight: 400;
				color: #000;
				width: auto;
				padding: 0;
			}
		}
		.getcode{
		font-size: 13px;
		font-weight: 400;
		color: #F2E0BC;
		line-height: 18px;
		width: 180rpx;
		height: 104rpx;
		line-height: 104rpx;
		text-align: right;
		}
		.num{
			width: 100%;
			height: 68rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color:#000;
		}
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 54rpx 0 14rpx 0;
			border-bottom: 1px solid #f5f5f5;
			.lable{
				font-size: 28rpx;
				font-weight: 600;
				color: #131415;
				line-height: 40rpx;
				min-width: 140rpx;
			}
			.input{
				flex: 1;
				margin-left: 6rpx;
				color: #FFFFFF !important;
				font-size: 26rpx;
				
				::v-deep .input-placeholder
				{
					text-align: right;
				}
				::v-deep .uni-input-input{
					text-align: right;
					font-size: 28rpx;
				}
			}
			::v-deep.u-button__text {
				color: #468EFF;
			}
		}
		
		
		.Ginput{			
			::v-deep .u-input{
				border-bottom:none !important;
				font-size: 28rpx;
			}
		}
		
		.tips {
			font-size: 28rpx;
			color: #8C93AA;
			margin-top: 20rpx;
		}
		
		.submit{
			margin-top: 70rpx;
				border: 0;
				// font-weight: 600;
				text-align: center;
				position: fixed;
				bottom: 100rpx;
				width: calc(100% - 60rpx);
				.u-button{
					color: #FFFFFF;
					background: #468EFF;
					border-radius: 4rpx;
					height: 80rpx;
					font-size: 32rpx;					
					line-height: 80rpx;
				}
		}
	}	
</style>